@import './variables.less';
@import '../../style/mixins.less';

.fnx-pagination {
	display: flex;
	font-size: var(--fnx-pagination-font-size);

	&__item,
	&__page-dec {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	&__item {
		flex: 1;
		box-sizing: border-box;
		min-width: var(--fnx-pagination-item-width);
		height: var(--fnx-pagination-height);
		color: var(--fnx-pagination-item-default-color);
		background-color: var(--fnx-pagination-background-color);
		cursor: pointer;
		user-select: none;

		&:active {
			color: var(--fnx-white);
			background-color: var(--fnx-pagination-item-default-color);
		}

		&::after {
			border-width: var(--fnx-border-width-base) 0
				var(--fnx-border-width-base) var(--fnx-border-width-base);
		}

		&:last-child::after {
			border-right-width: var(--fnx-border-width-base);
		}

		&--active {
			color: var(--fnx-white);
			background-color: var(--fnx-pagination-item-default-color);
		}
	}

	&__prev,
	&__next {
		padding: 0 var(--fnx-padding-base);
		cursor: pointer;
	}

	&__item--disabled {
		&,
		&:active {
			color: var(--fnx-pagination-item-disabled-color);
			background-color: var(
				--fnx-pagination-item-disabled-background-color
			);
			cursor: not-allowed;
			opacity: var(--fnx-pagination-disabled-opacity);
		}
	}

	&__page {
		flex-grow: 0;
	}

	&__page-dec {
		flex: 1;
		height: var(--fnx-pagination-height);
		color: var(--fnx-pagination-desc-color);
	}

	&--hidden {
		display: none;
	}

	&--simple {
		.fnx-pagination__prev,
		.fnx-pagination__next {
			&::after {
				border-width: var(--fnx-border-width-base);
			}
		}
	}
}
